<template>
	<div class="alert-bar-box">
		<div class="box-title">
			警情信息处理情况
		</div>
		<div class="bar-box">
			<div ref="operationBar" id="peration-bar"></div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import API from '@/api/index.js'
	import {
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				deviceInfo: {},
				operationBar: null,
				echartData: []
			}
		},

		mounted() {
			this.getData();
			// this.initHeartChart();
		},
		methods: {
			initEChart() {
				let self = this;
				self.operationBar = echarts.init(self.$refs.operationBar);
				self.option = {
					grid: {
						top: 20,
						bottom: 20,
						left: 20,
						right: 10
					},
					xAxis: {
						type: 'category',
						data: ['待处理', '已处理', '已完成'],

						axisLine: {
							show: true,
							lineStyle: {
								color: '#fff'
							}
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: true, // X轴线 颜色类型的修改
							lineStyle: {
								color: '#21293c'
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#01cdd7'
							}
						}
					},
					series: [{
						data: [2, 5, 5],
						type: 'bar',
						label: {
							show: true,
							position: 'top',
							color: '#fff'
						},
						barWidth: 40,
						itemStyle: {
							color: {
								type: 'line',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(97, 186, 255, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(155, 81, 255, 1)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}]
				}
				self.operationBar.setOption(self.option, true);
				
				window.onresize = () => {
					setTimeout(() => {
						self.operationBar.resize()
					})
				}
			},
			// 获取后台的统计数据
			getData() {
				let self = this;
				API.deviceCountData().then(res => {
					self.deviceInfo = res.data.data;
					self.echartData[0] = self.deviceInfo.waitAlert;
					self.echartData[1] = self.deviceInfo.handleAlert;
					self.echartData[2] = self.deviceInfo.handleAlert;
					self.echartData = self.echartData;
					self.initEChart();
					self.$nextTick(() => {
						
						this.operationBar.setOption({
							series: [{
								data: self.echartData,
							}]
						});
					})
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style>
</style>
